<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css"
	href="style/jquery.treeview.css"></link>
<link rel="stylesheet" type="text/css"
	href="style/jquery-ui-1.8.8.custom.css"></link>
<link rel="stylesheet" type="text/css"
	href="style/reset-fonts-grids.css"></link>
<link rel="stylesheet" type="text/css"
	href="style/tmpl.css"></link>

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript" src="js/yahoo-min.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/jquery.template-0.3.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>

<script type="text/javascript" src="js/tmpl/XMLTTemplate.js"></script>
<script type="text/javascript" src="js/tmpl/XMLTTempalteParam.js"></script>
<script type="text/javascript" src="js/tmpl/XMLTTempalteSection.js"></script>
<script type="text/javascript" src="js/tmpl/SectionElementHandlers.js"></script>

<script type="text/javascript">
var xmltTemplate = null;

function setContent(c) {
	if (!c)
		c = '<?xml version="1.0" encoding="UTF-8"?><template>'
			+ '<section name="display"><body/></section>'
			+ '</template>';
	else
		c = unescape(String(c).replace(/\+/g, " "));

	xmltTemplate = new XMLTTemplate(c);
	xmltTemplate.render();
	//$('#sectionsdiv').tabs();

	$('#generatorsdiv').html(getGeneratorsString());
	buildParamTree();
	initDropTargets();
	setDirtyFlag(false);
}

function initDropTargets() {
	$(".droppable").droppable({
		drop: function(event, ui) {
			var target = event.target.id;
			var source = ui.draggable[0];
			var type = source.id.split('_')[0];
			var subType = source.id.split('_')[1];
			if (target.indexOf('section_') == 0) {
				var sectionName = target.split('_')[2];
				var s  = xmltTemplate.getSectionByName(sectionName);
				if (s) {
					s.insert(type, source, event);
					setDirtyFlag(true);
				}
				else
					alert('no secion named "'+ sectionName + '"');
			}
			initDropTargets();
			return false;
		}
	});
}

function buildParamTree() {
	$('#editor_tree_container').html(getTreeContent());
	$("#editor_tree").treeview();
	$(".draggable").draggable({
		revert: true
	});
}

function getData() {
	setEditorContents(xmltTemplate.getString());
}

// editing funcitons

function setParamName(pName, el) {
	var p = xmltTemplate.getParamByName(pName);
	p.setName($(el).val());
	xmltTemplate.renderParameters();
	setDirtyFlag(true);
}

function setParamMulti(pName, el) {
	var p = xmltTemplate.getParamByName(pName);
	p.setIsMulti($(el).val());
	setDirtyFlag(true);
}

function setParamType(pName, el) {
	var p = xmltTemplate.getParamByName(pName);
	p.setType($(el).val());
	$('#param_ref_' + pName).html(getRefSelectString(pName, p.getType()));
	p.setRef('');
	setDirtyFlag(true);
}

function setParamRef(pName, el) {
	var p = xmltTemplate.getParamByName(pName);
	p.setRef($(el).val());
	setDirtyFlag(true);
}

function addSectionElement(sectionName, type, bodyId) {
	var s  = xmltTemplate.getSectionByName(sectionName);
	s.addElement(type, bodyId);
}

function delSectionElement(el) {
	$(el).closest('div').remove();
	setDirtyFlag(true);
}

function setSectionGenerateableFlag(sectionName, el) {
	var s  = xmltTemplate.getSectionByName(sectionName);
	s.setIsGenerateable($(el).is(':checked'));
	setDirtyFlag(true);
}

</script>
</head>
<body>
	<div>
		<div class="header">
			Parameters <a href="#" onclick="$('#paramsdiv').toggle(); return false;">Toggle visibility</a><br/>
		</div>
		<div id="paramsdiv">
			<a id="param_add" href="#" onclick="xmltTemplate.addParam(); return false;">Add parameter</a>
			<table>
				<thead>
					<tr>
						<td><b>Name</b></td>
						<td style="width: 100px"><b>Is Multiple?</b></td>
						<td><b>Type</b></td>
						<td><b>Reference</b></td>
						<td></td>
					</tr>
				</thead>
				<tbody id="params_tbody">
				</tbody>
			</table>
		</div>
	</div>
	<div>
		<div class="header">
			Content generator
		</div>
		<div id="generatorsdiv">
		</div>
	</div>
	<div style="height: auto;">
		<div class="header">Sections</div>
		<table style="width: 100%;">
			<tr style="height: 100%;">
				<td width="200px" valign="top" style="overflow: auto;">
					<div id="editor_tree_container"></div>
				</td>
				<td valign="top">
					<div id="sectionsdiv">
						<!-- ul>
							<li><a href="#section_display"><span>Display</span></a></li>
							<li><a href="#section_content"><span>Content</span></a></li>
						</ul-->
					</div>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
